<template>
    <div class="search">
            <el-autocomplete clearable @select="goDetail" :trigger-on-focus="false" placeholder="请输入医院名称" v-model="hosname" :fetch-suggestions="hospitalSearch"/>        
        <el-button type="primary" size="default" :icon="Search"></el-button>
    </div>
</template>

<script setup lang="ts">
// 引入element-plus提供的icons图标
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue';
import type {HospitalInfo} from '../../../api/home/type';
import {reqHospitalInfo} from '../../../api/home/index';
import { useRouter } from 'vue-router';
// 创建路由器对象
let $router = useRouter();
// 收集搜索的关键字(医院的名称)
let hosname = ref<string>('');
// 顶部组件回调
const hospitalSearch= async (keyword:string,cb:any)=>{
    // 当用户输入完全关键字函数会执行一次，发送请求获取需要展示的数据
    let result: HospitalInfo = await reqHospitalInfo(keyword);
    // 整理数据，变成让人家组件需要的数据格式
    let showData = result.data.map(item =>{
        return {
            value:item.hosname, //展示的医院的名称
            hoscode:item.hoscode //存储医院编码
        }
    })
    // console.log(result.data);
    // 给组件提供展示的户数
    cb(showData);  
}
// 点击某一推荐项
const goDetail = (item:any)=>{
    // console.log(item);
    // 点击推荐项目进入医院详情页，将来需要携带query参数(医院的编码)
    $router.push({path:'/hospital/register',query:{hoscode:item.hoscode}})
}
</script >
<!-- 更改封装好的element样式需要使用深度选择器 -->
<!-- 有三种  1、 >>>  2、/deep/   3、::v-deep -->
<style scoped lang="scss">
.search {
    width: 100%;
    height: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0px;
    ::v-deep(.el-input__wrapper){
        width:600px;
        margin-right:10px
    }
}
</style>